﻿<template>
    <div>
        <div class="big_box">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>车辆管理</el-breadcrumb-item>
                <el-breadcrumb-item>油卡选择</el-breadcrumb-item>
            </el-breadcrumb>
            <el-divider></el-divider>
            <el-form class="demo-form-inline" label-width="140px">
                <el-row :gutter="4" class="row-bg">
                    <el-col :span="3">
                        <el-select placeholder="油卡选择" filterable v-model="GasCardsId">
                            <el-option :value="0" label="油卡选择"></el-option>
                            <el-option v-for="v in AllGasCards" :label="v.CardNumber" :value="v.Id"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="3">
                        <el-select placeholder="请选择项目" filterable v-model="ProjectId">
                            <el-option :value="0" label="请选择项目">请选择项目</el-option>
                            <el-option v-for="v in AllProject" :label="v.ProjectName" :value="v.Id"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="3">
                        <el-date-picker type="date"
                                        v-model="StartDate"
                                        style="width:100%"
                                        value-format="yyyy-MM-dd"
                                        placeholder="开始日期">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="3">
                        <el-date-picker type="date"
                                        v-model="EndDate"
                                        style="width:100%"
                                        value-format="yyyy-MM-dd"
                                        placeholder="结束日期">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="1">
                        <el-button icon="el-icon-search"   @click="GettableDB()"></el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button class="buttongroup" type="success"   icon="el-icon-circle-plus-outline" @click="AddGasCard">添加油卡</el-button>
                    </el-col>

                    <el-col :span="3">
                        <el-button class="buttongroup" type="success"   icon="el-icon-circle-plus-outline" @click="AddCardPrice">添加油卡充值</el-button>
                    </el-col>

                </el-row>
            </el-form>

            <div style="margin-top:35px">
                <el-divider content-position="left" style="margin-top:10px"><h2 style="padding:0px">油卡</h2></el-divider>
                <el-row style="padding-top: 10px">
                    <el-col>
                        <el-table :data="iGasCardstableData"
                                  style="width: 100%"
                                  ref="multipleTable"
                                  border>
                            <el-table-column header-align="center" fixed type="index" label="序号" align="center" width="50" :index="_indexMethod"></el-table-column>
                            <el-table-column header-align="center" prop="CareName" label="汽车品牌" align="center" :show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                    {{AllTById(scope.row,"CareName")}}
                                </template>
                            </el-table-column>
                            <el-table-column header-align="center" prop="CarId" label="车牌号" align="center" :show-overflow-tooltip="true">

                                <template slot-scope="scope">
                                    {{AllTById(scope.row,"")}}
                                </template>
                            </el-table-column>
                            <el-table-column header-align="center" prop="CardNumber" label="油卡编号" align="center">
                            </el-table-column>
                            <el-table-column header-align="center" prop="CardNumber" label="油费" align="center">
                                <template slot-scope="scope">
                                    <div v-if="scope.row.ParentId == 0" style='height:100%; text-align: center;'>
                                        <label style='color:red ;text-align:left'>主油卡余额：</label>
                                        <label>{{scope.row.CardPrice}}</label>
                                    </div>
                                    <div v-else style='height:100%; text-align: center;'>
                                        <label style='color: dodgerblue;text-align: center'>充值总金额：</label>
                                        <label>{{scope.row.CardPrice}}</label>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column header-align="center" prop="CardNumber" label="是否主卡" width="100" align="center">
                                <template slot-scope="scope">
                                    <label v-if="scope.row.ParentId==0" style='color:red ;'>是</label>
                                    <label v-else style='color:dodgerblue;'>否</label>
                                </template>
                            </el-table-column>

                            <el-table-column header-align="center" prop="barDemo" label="操作" fixed="right" width="200" align="center">
                                <template slot-scope="scope">
                                    <el-button type="primary" class="BtnSize" size="mini" plain @click="editGasCard(scope.row)">编辑</el-button>
                                    <el-button type="danger" class="BtnSize" size="mini" plain @click="Del(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-col>
                </el-row>

                <el-divider content-position="left"><h2>油卡充值记录</h2></el-divider>
                <el-row style="padding-top: 10px">
                    <el-col>
                        <el-table :data="iGasCardsRecordtableData"
                                  style="width: 100%"
                                  ref="multipleTable"
                                  show-summary
                                  :summary-method="getiGasCardsDataSummaries"
                                  @selection-change="selectionLineChangeHandle"
                                  border>
                            <el-table-column header-align="center" fixed type="index" label="序号" align="center" width="50" :index="_indexMethod"></el-table-column>
                            <el-table-column header-align="center" prop="CareName" label="汽车品牌" align="center" :show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                    {{AllTNameById(scope.row)}}
                                </template>
                            </el-table-column>
                            <el-table-column header-align="center" prop="RecordDate" label="充值时间" align="center" :show-overflow-tooltip="true">
                            </el-table-column>
                            <el-table-column header-align="center" prop="TopUpRecord" label="充值金额" width="320" align="center">
                            </el-table-column>
                            <el-table-column header-align="center" prop="StartTime" label="所在项目" :show-overflow-tooltip="true" align="center">
                                <template slot-scope="scope">
                                    {{AllProjectNameByIdFc(scope.row)}}
                                </template>
                            </el-table-column>

                            <el-table-column header-align="center" prop="barDemo" label="操作" fixed="right" width="200" align="center">
                                <template slot-scope="scope">
                                    <el-button type="primary" class="BtnSize" size="mini" plain @click="GasCardsedit(scope.row)">编辑</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-col>
                </el-row>
            </div>
        </div>


        <el-dialog :visible.sync="AddGetAllVehicleAndokShow" :title="Vehicletitle" width="50%">
            <el-form label-width="150px" :model="AddVehicleGas">
                <el-row>
                    <el-col :span="20" :offset="1">
                        <el-form-item label="油卡编号" prop="CardNumber">
                            <el-input v-model="AddVehicleGas.CardNumber" placeholder="油卡编号"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20" :offset="1">
                        <el-form-item label="请选择汽车" prop="LicensePlate">
                            <el-select placeholder="--请选择绑定汽车-- (主卡不选择)" filterable v-model="AddVehicleGas.LicensePlate" style="width:100%">
                                <el-option :value="0" label="--请选择绑定汽车-- (主卡不选择)"></el-option>
                                <el-option v-for="v in AllVehicle" :label="v.LicensePlate" :value="v.Id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20" :offset="1">
                        <el-form-item label="请选择上级油卡" prop="ParentId">
                            <el-select placeholder="--请选择上级油卡-- (主卡不选择)" filterable v-model="AddVehicleGas.ParentId" style="width:100%">
                                <el-option :value="0" label="--请选择上级油卡-- (主卡不选择)"></el-option>
                                <el-option v-for="v in AllGasCards" :label="v.CardNumber" :value="v.Id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20" :offset="1" style="text-align:center">
                        <el-button type="primary" class="BtnSize" plain @click="VehicleAndokSave()">确定</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>


        <el-dialog :visible.sync="AddGasCardsRecordShow" :title="GasCardsTitle" width="50%">
            <el-form label-width="150px" :model="gasCardsRecord">
                <el-row>
                    <el-col :span="20" :offset="1">
                        <el-form-item label="请选择油卡" prop="ParentId">
                            <el-select placeholder="--请选择充值油卡-- (主卡不选择)" filterable v-model="gasCardsRecord.GasCardsId" style="width:100%">
                                <el-option :value="0" label="--请选择充值油卡-- (主卡不选择)"></el-option>
                                <el-option v-for="v in AllGasCards" :label="v.CardNumber" :value="v.Id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="20" :offset="1">
                        <el-form-item label="请选充值日期" prop="ParentId">
                            <el-date-picker type="date"
                                            style="width:100%"
                                            v-model="gasCardsRecord.RecordDate"
                                            value-format="yyyy-MM-dd"
                                            placeholder="开始日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="20" :offset="1">
                        <el-form-item label="充值金额" prop="TopUpRecord">
                            <el-input v-model="gasCardsRecord.TopUpRecord" placeholder="充值金额"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="20" :offset="1">
                        <el-form-item label="请选择项目" prop="ProjectId">
                            <el-select placeholder="请选择项目" filterable v-model="gasCardsRecord.ProjectId" style="width:100%">
                                <el-option :value="0" label="请选择项目">请选择项目</el-option>
                                <el-option v-for="v in AllProject" :label="v.ProjectName" :value="v.Id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="20" :offset="1" style="text-align:center">
                        <el-button type="primary" class="BtnSize" plain @click="gasCardsRecordSave()">确定</el-button>
                    </el-col>
                </el-row>
            </el-form> 
        </el-dialog>

    </div>
</template>


<script>
    import * as publicjs from "/public/Scriput/Public"
    export default {
        name: "GasCardsRecord",
        data() {
            return {
                Vehicletitle: '',
                GasCardsTitle: '',
                AddGetAllVehicleAndokShow: false,
                AddGasCardsRecordShow: false,
                AddVehicleGas: {
                    Id: 0,
                    CardNumber: '',
                    LicensePlate: 0,
                    ParentId: 0,
                    TopUpRecord: 0,
                },
                gasCardsRecord: {
                    Id: 0,
                    TopUpRecord: '',
                    ProjectId: 0,
                    RecordDate: '',
                    ParentId: 0,
                },

                AllGasCards: [],
                AllProject: [],
                //数据查询
                GasCardsId: '',
                ProjectId: 0,
                StartDate: '',
                EndDate: '',
                //数据查询
                delidarray: [],
                AllVehicle: [],
                //分页数据绑定
                pagination: {
                    currentPage: 1,
                    pagesizes: [10, 20, 30, 40, 50],
                    pagesize: 10,
                    total: 0
                },
                //表格数据
                iGasCardsRecordtableData: [],
                iGasCardstableData: [],


            }
        },
        created() {
            this.AllGasCards = publicjs.GetAllGasCards(this.$http);
            this.AllProject = publicjs.GetAllProject(this.$http);
            this.AllVehicle = publicjs.GetAllVehicleAndok(this.$http);
            this.GasCards();
            this.iGasCardsRecord();
        },
        methods: {
            _indexMethod(index) {
                return ((this.pagination.currentPage - 1) * this.pagination.pagesize) + index + 1
            },
            selectionLineChangeHandle(val) {
                this.delidarray = val;
            },
            GettableDB() {
                this.iGasCardsRecord();
                this.GasCards();
            },
            //添加油卡
            AddGasCard() {
                this.Vehicletitle = "添加油卡信息";
                this.AddVehicleGas.Id = 0;
                this.AddVehicleGas.CardNumber = '';
                this.AddVehicleGas.LicensePlate = 0;
                this.AddVehicleGas.ParentId = 0;
                this.AddGetAllVehicleAndokShow = true;
            },

            AllTById(d, name) {
                if (d.CarId != null & d.CarId != "") {
                    var veh = this.AllVehicle.find(x => x.Id == d.CarId);
                    if (veh != undefined) {
                        if (name == "CareName") {
                            return veh.CareName
                        } else {
                            return veh.LicensePlate
                        }
                    }
                } else {
                    return "固远晨通";
                }
            },

            AllTNameById(d) {
                if (d.GasCardsId != null & d.GasCardsId != "") {
                    var GasCard = this.AllGasCards.find(x => x.Id == d.GasCardsId);
                    if (GasCard != undefined) {
                        if (GasCard.CarId == 0) {
                            return "固远晨通主油卡"
                        }
                        return this.AllTById(GasCard, 'CareName')
                    } else {
                        return "车辆数据错误"
                    }
                }
            },

            fmtDate(date) {
                if (date != null) {
                    var val = date.split(' ')[0]
                    return val == "0001-01-01" ? "暂未填写" : val;
                }
            },

            iGasCardsRecord() {
                this.$http.post('/VehicleManagement/GetAllGasCardsRecord', {
                    EndDate: this.EndDate,
                    StartDate: this.StartDate,
                    CardsId: this.GasCardsId,
                    ProjectId: this.ProjectId,
                }).then(res => {
                    this.iGasCardsRecordtableData = res.data.data
                });
            },

            GasCards() {
                this.$http.post('/VehicleManagement/GetAllGasCards').then(res => {
                    this.iGasCardstableData = res.data.data
                });
            },

            AllProjectNameByIdFc(d) {
                if (d.ProjectId != null & d.ProjectId != "") {
                    var proj = this.AllProject.find(x => x.Id == d.ProjectId);
                    if (proj != undefined) {
                        return proj.ProjectName
                    }
                } else {
                    return "其他";
                }
            },



            editGasCard(obj) {
                this.Vehicletitle = "修改油卡信息";
                //修改油卡
                this.AddGetAllVehicleAndokShow = true;
                this.AddVehicleGas = obj;
                this.AddVehicleGas.LicensePlate = obj.CarId;
            },
            VehicleAndokSave() {
                if (this.Vehicletitle == "修改油卡信息") {
                    this.UpVehicleAndokSave();
                } else {
                    this.AddVehicleAndokSave();
                }
            },
            AddVehicleAndokSave() {
                //添加油卡
                let loadding = this.openLoading();
                this.$http.post("/VehicleManagement/AddgasCardOrPic", { "gasCards": this.AddVehicleGas }).then(res => {
                    loadding.close();
                    if (res.data.bit) {
                        this.$message.success("数据添加成功");
                        this.AddGetAllVehicleAndokShow = false;
                        this.GettableDB();
                    } else {
                        this.$message.error("数据添加失败");
                    }
                })
            },
            UpVehicleAndokSave() {
                //修改油卡
                let loadding = this.openLoading();
                this.$http.post("/VehicleManagement/UpgasCardOrPic", { "gasCards": this.AddVehicleGas }).then(res => {
                    loadding.close();
                    if (res.data.bit) {
                        this.$message.success("数据修改成功");
                        this.AddGetAllVehicleAndokShow = false;
                        this.GettableDB();
                    } else {
                        this.$message.error("数据修改失败");
                    }
                })
            },


            gasCardsRecordSave() {
                if (this.GasCardsTitle == "修改充值信息") {
                    this.UpgasCardsRecord();
                } else {
                    this.AddgasCardsRecord();
                }
            },

            AddgasCardsRecord() {
                //添加油卡加油数据
                let loadding = this.openLoading();
                this.$http.post("/VehicleManagement/AddgasCardOrPic", { "gasCardsRecord": this.gasCardsRecord }).then(res => {
                    loadding.close();
                    if (res.data.bit) {
                        this.$message.success("数据添加成功");
                        this.AddGetAllVehicleAndokShow = false;
                        this.AddGasCardsRecordShow = false;
                        this.GettableDB();
                    } else {
                        this.$message.error("数据添加失败");
                    }
                })
            },
            UpgasCardsRecord() {
                //修改油卡加油数据
                let loadding = this.openLoading();
                this.$http.post("/VehicleManagement/UpgasCardOrPic", { "gasCardsRecord": this.gasCardsRecord }).then(res => {
                    loadding.close();
                    if (res.data.bit) {
                        this.$message.success("数据修改成功");
                        this.AddGetAllVehicleAndokShow = false;
                        this.AddGasCardsRecordShow = false;

                        this.GettableDB();
                    } else {
                        this.$message.error("数据修改失败");
                    }
                })
            },


            //修改油卡充值记录
            GasCardsedit(obj) {
                this.GasCardsTitle = "修改充值信息";
                this.gasCardsRecord = obj;
                this.gasCardsRecord.Id = obj.Id;
                this.AddGasCardsRecordShow = true;
            },

            //添加油卡充值
            AddCardPrice() {
                this.GasCardsTitle = "添加充值信息";
                this.AddGasCardsRecordShow = true;
            },



            AllvnameById(d) {
                if (d.GasCardsId != "" && d.GasCardsId != null) {
                    var paridfirst = this.AllGasCards.find(x => x.Id == d.GasCardsId);
                    if (paridfirst != null) {
                        return paridfirst.ParentId;
                    }
                }
            },

            //油卡信息合计计算
            getiGasCardsDataSummaries(param) {
                const { columns, data } = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = '总价';
                        return;
                    } else if (index === 3) {
                        var sum = 0;
                        var bossSum = 0;
                        data.forEach(item => {
                            var parnid = this.AllvnameById(item);
                            if (parnid != 0) {
                                sum += Number(item.TopUpRecord)
                            } else {
                                bossSum += Number(item.TopUpRecord)
                            }
                        })
                        sums[index] = "主油卡充值:" + bossSum + " &&&   副油卡充值" + sum;
                    }
                });
                return sums;
            },
            Del(obj) {
                this.$confirm('你确定要删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'error'
                }).then(() => {
                    this.$http.post('/VehicleManagement/Delectdata', { Id: obj.Id }).then(res => {
                        if (res.data.bit) {
                            this.GasCards();
                            this.$message.success("删除数据成功");
                        } else {
                            this.$message.error("删除数据失败");
                        }
                    });
                })
            },
        },
    }
</script>
<style scoped>
</style>
